<script setup>
// isRef 判断一个状态是否具备响应式
// ref 让数据具备响应式

import { isRef, ref } from 'vue'
// 直接声明的数据是不具备响应式
// let count = 100

let count = ref(100)

// console.log(isRef(count));

// vue中数据的响应式是通过 proxy 代理的方式进行实现
/* 
  100  会被代理成 ->
  proxy({
    getValue(){
      return 100
    }
    setValue(newValue){

    }
  })
*/
console.log(count);

setTimeout(() => {
  // 在 script 中使用的时候需要 .value 获取
  // 在 template 中使用的时候不需要 .value 
  count.value++
}, 3000)

</script>
<template>
  <div>
    <h1>app -- {{ count }} </h1>
    <button @click="count++">点击增加</button>
  </div>
</template>